<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  img: {
    type: String,
    default: '', // 默认验证码图片
  },
});

const emit = defineEmits(['update:modelValue', 'captcha']);

const handleInput = (event) => {
  emit('update:modelValue', event.target.value);
};

const handleRefreshCaptcha = () => {
  emit('captcha');
};
</script>

<template>
  <div class="captcha-container">
    <input
        :value="modelValue"
        @input="handleInput"
        class="input-field"
        placeholder="请输入验证码"
    />
    <img
        :src="img"
        alt="验证码"
        class="captcha-image"
        @click="handleRefreshCaptcha"
    />
  </div>
</template>

<style scoped>
.captcha-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-field {
  width: 130px; /* 输入框宽度 */
  padding: 8px 12px;
  border: 1px solid #ccc; /* 边框颜色 */
  border-radius: 4px; /* 圆角 */
  font-size: 14px;
  color: #333; /* 输入文字颜色 */
  background-color: #fff; /* 背景色 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-field:focus {
  border-color: #409eff; /* 聚焦时边框颜色 */
  outline: none;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5); /* 聚焦时阴影 */
}

.input-field::placeholder {
  color: #999; /* 占位符文字颜色 */
}

.captcha-image {
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}

.captcha-image:hover {
  opacity: 0.8;
}
</style>